<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>云API</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css">
    <link rel="stylesheet" type="text/css" href="../css/swiper.css">
    <link rel="stylesheet" href="../css/frame0.css">
    <script src='../script/jquery.js'></script>
    <style>
    body{
            background:#fff;
    }

    </style>
</head>
<body>
    <div class="index_top">
      <img src="../image/common/logo.png" alt="">
      <div class="box">
        <div class="login btn" tapmode onclick='jumpToLogin()'>登陆</div>
        <div class="register btn" tapmode onclick='jumpToRegister()'>注册</div>
      </div>
    </div>
    <!-- //轮播广告 -->
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
            <div style="background:url('https://www.51jili.com/attachment/display/3345') no-repeat;background-size:100% 100%;height:100%"></div>
        </div>
        <div class="swiper-slide">
          <div style="background:url('https://www.51jili.com/attachment/display/3357') no-repeat;background-size:100% 100%;height:100%"></div>
        </div>
        <div class="swiper-slide">
            <div style="background:url('https://www.51jili.com/attachment/display/3378') no-repeat;background-size:100% 100%;height:100%"></div>
        </div>
        <div class="swiper-slide">
            <div style="background:url('https://www.51jili.com/attachment/display/3394') no-repeat;background-size:100% 100%;height:100%"></div>
        </div>
        <div class="swiper-slide">
            <div style="background:url('https://www.51jili.com/attachment/display/3411') no-repeat;background-size:100% 100%;height:100%"></div>
        </div>
    </div>
    <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
</div>
<!-- 平台公告 -->
<div class="platform">
  <div class="platform-marquee">
    <div>
      <ul>
        <li><a href="#">1恭喜JL*****2抽中5元红包1恭喜JL*****2抽中5元红包1恭喜JL*****2抽中5元红包</a></li>
        <li><a href="#">2恭喜JL*****2抽中5元红包1恭喜JL*****2抽中5元红包1恭喜JL*****2抽中5元红包</a></li>
        <li><a href="#">3恭喜JL*****2抽中5元红包1恭喜JL*****2抽中5元红包1恭喜JL*****2抽中5元红包</a></li>
      </ul>
    </div>
  </div>
  <div class='platform-advantage aui-clearfix'>
    <ul class='aui-clearfix'>
      <li>
        <img src="../image/ico-01(App).png" alt="">
        <h2>公司担保</h2>
        <p>项目审核严格</p>
      </li>
      <li>
        <img src="../image/ico-02(App).png" alt="">
        <h2>理财管家</h2>
        <p>100元起投</p>
      </li>
      <li>
        <img src="../image/ico-03(App).png" alt="">
        <h2>免费体验</h2>
        <p>不收手续费</p>
      </li>
      <li>
        <img src="../image/ico-04(App).png" alt="">
        <h2>快速赎回</h2>
        <p>资金随用随取</p>
      </li>
    </ul>
  </div>
</div>

<!-- 首页推荐产品 -->
<div class='item-recommend'>
  <div class='title'>
    <img src="https://www.51jili.com/attachment/display/3311" alt="">
    <span>AD002732</span>
    <img src="../image/icon_phone.png" alt="">
  </div>
  <div class='detail-info'>
    <canvas id='canvas' data-value='80' height=300 widht=300></canvas>
    <p class='progress'>进度：<small>88.01%</small></p>
    <p class='shouyilv'>预期年化收益率</p>
    <p class='shouyilv-num'><i>9.2</i><em>%</em></p>
    <p class='time'>期限<span>12个月</span></p>
  </div>
  <div class="item-recommend-pay">
    <ul class='aui-clearfix'>
      <li>
        <h2>700,000</h2>
        <p>借款金额</p>
      </li>
      <li>
        <h2>83,919</h2>
        <p>可投金额</p>
      </li>
    </ul>
    <a href="">立即投标</a>
  </div>
</div>
<script src='../script/common.js'></script>
<script src='../script/swiper.js'></script>
<script src='../script/indexAnimation.js'></script>
<script>
    apiready = function(){
      fixiosLineHeight();
      //**
      //** 设置下拉刷新
      //**
      api.setRefreshHeaderInfo({
          visible: true,
          loadingImg: '..image/refresh.jpg',
          bgColor: '#fff',
          textColor: '#333',
          textDown: '下拉刷新...',
          textUp: '松开刷新...',
          showTime: true
      }, function(ret, err){
          api.showProgress({
              text:'使劲加载中..',
              title: '客官请稍等..',
              modal: true,
              animationType:'fade'
          });
          setTimeout(function(){
            api.refreshHeaderLoadDone();
            alert('刷新完成');
            api.hideProgress();
          },3000)
      });

      //**
      //** 监听是否到底部，设置上拉刷新
      //**
      api.addEventListener({
          name: 'scrolltobottom',
          extra:{
            threshold:100
          }
      }, function(ret, err){
          api.showProgress({
              style: 'default',
              animationType: 'fade',
              title: '努力加载中...',
              text: '先喝杯茶...',
              modal: false
          });
          setTimeout(function(){
            alert('上拉刷新完成');
            api.hideProgress();
          },3000)
      });
    }

    //**
    //** 加载swiper轮播
    //**
    var mySwiper = new Swiper ('.swiper-container', {
        direction: 'horizontal',
        autoplay:2000,
        loop: true,
        width:window.innerWidth,
        height:400,
        setWrapperSize :true,
        lazyLoading : true,
        pagination: '.swiper-pagination',
        onTouchMove:function(){
          api.setFrameAttr({
              name : 'frame0',
              bounces : false
          });
        },
        onTouchEnd:function(){
          api.setFrameAttr({
              name : 'frame0',
              bounces : true
          });
        }
    });

    //**
    //** 监听scroll改变首页顶头透明度
    //**
    $(window).on('scroll',function(){
      var bodyScrollTop = $('body').scrollTop();
      if(bodyScrollTop>70){
        $('.index_top').addClass('showHeader');
      }else {
        $('.index_top').removeClass('showHeader');
      }
    })

    //**
    //** 中间公告轮播
    //**
    setInterval(function(){
      $('.platform-marquee>div>ul').addClass('moveUp');
      setTimeout(function(){
        $('.platform-marquee ul>li:first').clone().appendTo($('.platform-marquee ul'));
        $('.platform-marquee ul>li:first').remove();
        $('.platform-marquee>div>ul').removeClass('moveUp');
      },500)
    },3000)

  //**
  //** 修改iphone登陆按钮行高
  //**
  function fixiosLineHeight (){
    if(api.systemType == 'ios'){
      $('.index_top div.btn').css({'lineHeight':'2.6em'});
    }
  }

  //**
  //** 跳转页面函数
  //**
  function jumpToLogin (){
    api.openWin({
        name: 'login',
        url: './login.html',
        pageParam: {
            name: 'test'
        },
        // delay:300, ios需加延时
        animation:'movein'
    });
  }

  function jumpToRegister (){
    api.openWin({
        name: 'register',
        url: './register.html',
        pageParam: {
            name: 'test'
        },
        // delay:300, ios需加延时
        animation:'movein'
    });
  }

</script>
</body>
</html>
